import React, { Component } from 'react'
import store from '../../redux/store'
import {
  incrementAction,
  decrementAction,
  incrementAsyncAction,
} from '../../redux/actions/count'

class Index extends Component {
  increment = () => {
    const { value } = this.selectValue
    store.dispatch(incrementAction(+value))
  }
  decrement = () => {
    const { value } = this.selectValue
    store.dispatch(decrementAction(+value))
  }
  incrementIfOdd = () => {
    const { value } = this.selectValue
    if (store.getState() % 2 === 1) {
      store.dispatch(incrementAction(+value))
    }
  }
  incrementAsync = () => {
    const { value } = this.selectValue
    store.dispatch(incrementAsyncAction(+value, 1000))
  }

  render() {
    return (
      <div>
        <p>当前求和为：{store.getState()}</p>
        <select ref={(val) => (this.selectValue = val)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;&nbsp;
        <button onClick={this.increment}>加</button>&nbsp;&nbsp;
        <button onClick={this.decrement}>减</button>&nbsp;&nbsp;
        <button onClick={this.incrementIfOdd}>奇数加</button>&nbsp;&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

export default Index
